<template>
  <div class="main">
    <img :src="$store.state.appBg" class="bg1" alt>
    <div class="sidebar">
      <scroll-container ref="scrollContainer">
        <multi-list
          @scrollTo="scrollTo"
          @scrollFoc="scrollFoc"
          :groupDatas="gradeList"
          :head="head"
        >
          <ul>
            <li
              :data-index="'tar_0_'+index"
              :class="{active: gradeList.focArr[0][index]}"
              v-for="(grade,index) in gradeList.dataArr[0].data"
              :key="index"
            >
              {{grade.text}}
              <!-- <router-link to="lesson">{{grade}}</router-link> -->
            </li>
          </ul>
        </multi-list>
      </scroll-container>
    </div>
    <!--<router-view :key="key" :getChildData="getChildData"></router-view>-->
    <hsktlist2 :groupDatas="groupDatas" :group="1"></hsktlist2>
  </div>
</template>
<script>
  import scrollContainer from "@/components/base/scroll-container/scroll-container";
  import multiList from "@/components/base/multi-list/multi-list";
  import hsktlist2 from "@/components/tbkt/hskt-list-2";

  export default {
    name: "tbkt_msgkk_msjs",
    components: {
      hsktlist2,
      scrollContainer,
      multiList
    },
    data() {
      return {
        groups: [0, 1],
        scrollY: 0,
        backObjName: "tbkt_msgkk_msjs",
        hs: this.$store.state.hs,
        bridge: this.$store.state.bridge,
        head: {
          right: "1-0"
        },
        groupDatas: {
          dataArr: [
            {
              maxLine: 4,
              dynamic: false,
              title: "名师介绍",
              data: []
            }
          ],
          focArr: [[]]
        },
        gradeList: {
          dataArr: [
            {
              maxLine: 1,
              dynamic: false,
              data: []
            }
          ],
          focArr: [[]]
        }
      };
    },
    methods: {
      scroll(pos) {
        this.scrollY = pos.y;
        // console.log(pos);
      },
      scrollTo(targetIndex) {
        this.$refs.scrollContainer.scrollTo(targetIndex);
      },
      scrollFoc(obj) {
        this.getData(this.gradeList.dataArr[0].data[obj.objindex].fodderid);
        this.hs.areaLastFocus[1] = null;
      },
      setBackObj(backObj) {
        this.hs.cookie.set(this.backObjName, JSON.stringify(backObj));
      },
      getList() {
        let parame = JSON.stringify(
          {
            "head": {
              "clientid": this.bridge.stbid
            },
            "body": {
              "codes": ["CLPS_DVBVOD_HD_SMARTSCHOOL"],
              "sitecode": "iptvtest", // 站点编码
              "vsitecode": "hzvsite" // 虚拟站点
            }
          }
        )
        this.hs.ajax.post('http://125.210.113.145/WSL/Core/CrossDomain.ashx', this.$qs.stringify({
          url: 'http://irs.wasu.cn:8080/irs_ol/getirs',
          data: encodeURIComponent(parame),
          method: 'post',
          type: 'json'
        }), (response)=>{
          response = JSON.parse(response)
          console.log(response);
          this.gradeList.dataArr[0].data = response.contents[0].infoList
        },0,function (msg) {

        },3000)
      },
      getData(fodderid) {
        let parame = JSON.stringify(
          {
            "head": {
              "clientid": this.bridge.stbid
            },
            "body": {
              "codes": [fodderid],
              "sitecode": "iptvtest", // 站点编码
              "vsitecode": "hzvsite" // 虚拟站点
            }
          }
        )
        this.hs.ajax.post('http://125.210.113.145/WSL/Core/CrossDomain.ashx', this.$qs.stringify({
          url: 'http://irs.wasu.cn:8080/irs_ol/getirs',
          data: encodeURIComponent(parame),
          method: 'post',
          type: 'json'
        }), (response)=>{
          response = JSON.parse(response)
          console.log(response);
          this.groupDatas.dataArr[0].data = response.contents[0].infoList
        },0,function (msg) {

        },3000)
      }
    },
    created() {
      this.getList();
    },
    mounted() {
      this.hs.addSelect(this.groups, (group, objid, objindex) => {
        if (group === 1) {
          this.setBackObj({
            backFocArr: [this.hs.areaLastFocus[0].objid, this.hs.focObj.objid]
          });
          this.$router.push(
            "/tbkt/msgkk_msjs_detail/" +
            this.groupDatas.dataArr[0].data[objindex].fodderid
          );
        }
      });

      //  查看是否有记忆焦点
      if (this.hs.cookie.get(this.backObjName)) {
        let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
        let focArr = backObj.backFocArr;
        this.hs.cookie.delOne(this.backObjName);
        // console.log(JSON.stringify(focArr) + "**************");
        this.hs.initFocus(focArr[0]);
        setTimeout(() => {
          this.hs.initFocus(focArr[1], true);
        }, 200);
      } else {
        this.hs.initFocus("0-0");
      }
    }
  };
</script>

<style scoped lang="less">
  .main {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    display: flex;
    .bg1 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 1920px;
      height: 1080px;
      z-index: -1;
    }
    .sidebar {
      box-sizing: border-box;
      padding-top: 184px;
      margin-left: 120px;
      margin-right: 72px;
      flex-shrink: 0;
      width: 200px;
      height: 1080px;
      overflow: hidden;
      .multi-container {
        padding-bottom: 80px;
        ul {
          display: block;
          margin: 0;
          padding: 0;
          li {
            text-align: center;
            margin-bottom: 48px;
            padding: 0;
            list-style: none;
            display: block;
            width: 200px;
            height: 60px;
            line-height: 60px;
            border-radius: 30px;
            background: #6ec6e8;
            color: #104572;
            font-size: 42px;
          }
          .active {
            color: #fbff92;
            background: #104572;
          }
        }
      }
    }
  }
</style>
